<template>
  <div style="height: 100%; overflow: auto; background:rgba(246, 246, 248, 1)">
    <div class="reg_header">
      <div class="main">
        <!-- <a :href="url">
                    <img src="@/assets/img/WechatIMG233.png" alt />
                </a>-->
      </div>
    </div>
    <div class="logo">
      <a :href="url">
        <img src="@/assets/img/zhaopinLogo.png" alt />
      </a>
    </div>
    <div class="reg_box" @keyup.enter="onSubmit">
      <h2>
        <span>手机注册</span>
        <router-link to="/login">直接登录</router-link>
      </h2>
      <el-form :model="param" ref="reg" :rules="rules">
        <el-form-item prop="phone">
          <el-input v-model.trim="param.phone" placeholder="手机号"></el-input>
        </el-form-item>
        <el-form-item prop="captchaCode">
          <el-input class="captchaCode" v-model="param.captchaCode" placeholder="图片验证码"></el-input>
          <img :src="img" alt @click="changeImage" />
        </el-form-item>
        <el-form-item prop="smsCode" class="btn_inner">
          <el-input v-model="param.smsCode" placeholder="短信验证码">
            <el-button slot="append" @click="postMassage" :class="{'disabled':countDown}">
              发送验证码
              <span v-show="countDown">({{countDown}})</span>
            </el-button>
          </el-input>
        </el-form-item>
        <el-form-item class="agreement">
          <el-checkbox v-model="param.selected" />我已阅读并同意
          <a href="javaScript:;" @click="dialogVisible=true">《樟树市人才服务》</a>
        </el-form-item>
        <el-form-item>
          <el-button class="submit_btn" type="primary" @click="onSubmit">求职者注册</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-dialog :visible.sync="dialogVisible" width="30%">
      <div>樟树市人才服务注册会员使用协议</div>
      <div>为保证用户的正常使用和网站的正常运行，我中心特设定本协议，不接受本协议，请勿使用本网站。</div>
      <div>
        一、信息的发布
        <ol>
          <li>不发布任何反动、违反法律、法规、规章规定的信息；</li>
          <li>不发布与招聘和人才毫无关联的商业信息；</li>
          <li>不发布任何虚假的信息；</li>
          <li>用户对所发布的信息承担完全法律责任；如需要，用户需提供证明信息准确性的相关材料。</li>
        </ol>
      </div>
      <div>
        二、信息的使用
        <ol>
          <li>招聘单位仅可就招聘目的使用求职者的简历信息；</li>
          <li>求职者仅可因应聘某职位，使用招聘单位发布的招聘信息；</li>
          <li>本网站提供的其他信息，仅与其相应内容有关的目的而被使用；</li>
          <li>不得将任何本网站的信息用作任何商业目的。</li>
        </ol>
      </div>

      <div>
        三、信息的公开
        <p>本网站尊重用户对自身所提供信息的公开程度，并严格遵照执行公开级别，因其它用户误用信息而导致的任何损失，本网站不承担责任。</p>
      </div>
      <div>
        四、信息的准确性
        <p>
          任何在本网站发布的信息，均必须符合合法、准确、及时、完整的原则。但本网站将不能保证所有由第三方提供的信息，或本网站自行采集的信息完全准确。由用户自身对信息进行核实和使用。本网站对访问者未经自行核实误用本网站信息造成的任何损失不予承担任何责任。对于与本网站链接的网站所涉及的信息准确性，本网站不予保证。
        </p>
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { register,  captchaImg, postMsg } from '../../../api/index';
import { token } from '../../../api/code';
export default {
  name: 'registration',
  data () {
    var checkImage = (rule, value, callback) => {
      console.log('图片');

      if (value.length > 3) {
        captchaImg({ code: this.param.captchaCode, uuid: this.param.captchaUUid }).then(data => {
          if (data.data) {
            this.checkImage = true;
            callback();
          } else {
            callback(new Error('请输入正确验证码'));
          }
        });
      } else {
        callback();
      }
    };
    return {
      timerMin: null,
      timer: null,
      url: '',
      dialogVisible: false,
      clickTime: 0,
      countDown: '',
      checkImage: false,
      values: 1,
      checked: false,
      stepsData: [
        { title: '手机号码验证', date: '' },
        { title: '账号信息填写', date: '' },
        { title: '完成注册', date: '' }
      ],
      img: '',
      param: {
        phone: '',
        captchaCode: '',
        captchaUUid: '',
        smsCode: '',
        selected: false
      },
      rules: {
        phone: [
          { required: true, message: '请输入手机号', trigger: 'blur' },
          { pattern: /^1[3456789]\d{9}$/, message: '请输入正确的手机号码', trigger: 'change' }
        ],
        // password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
        captchaCode: [{ required: true, message: '请输入图片验证码', trigger: 'blur' }, { validator: checkImage }],
        smsCode: [{ required: true, message: '请输入手机验证码', trigger: 'blur' }]
      }
    };
  },
  created () {
    token().then(data => {
      if (data.success) {
        this.$message.error(`您已登录无需重复登录！`);
        this.$router.push({ path: '/' });
      }
    });
  },
  mounted () {
    this.changeImage();
    this.url = process.env.VUE_APP_URL;
  },
  methods: {
    postMassage (e) {
      if (this.param.phone) {
        if (this.checkImage) {
          if (this.countDown) {
            return;
          }
          let query = {
            phone: this.param.phone,
            uuid: this.param.captchaUUid,
            code: this.param.captchaCode,
            type: 1
          };
          postMsg(query).then(data => {
            if (data.success) {
              let previous = this.clickTime;
              let now = new Date();
              if (now - previous > 60000) {
                console.log(1);
                this.clickTime = new Date();
                this.countDown = 60;
                this.timerMin = setInterval(() => {
                  this.countDown -= 1;
                }, 1000);
                this.timer = setTimeout(() => {
                  this.countDown = '';
                  clearInterval(this.timerMin);
                  clearTimeout(this.timer);
                }, 60000);
              }
            } else {
              this.checkImage = false;
              this.$message.error(`${data.msg}`);
            }
          });
        } else {
          this.$message.error('请正确输入图片验证码');
        }
      } else {
        this.$message.error('请输入手机号');
      }
    },
    onSubmit () {
      this.$refs.reg.validate(valid => {
        if (valid) {
          if (!this.param.selected) {
            this.$message.success('请仔细阅读协议，并点击同意！');
            return;
          }
          let query = {
            phone: this.param.phone,
            captchaCode: this.param.captchaCode,
            captchaUUid: this.param.captchaUUid,
            smsCode: this.param.smsCode,
            captchaChannelType: 1
          };
          register(query).then(data => {
            if (data.success) {
              this.$message.success('注册成功');

              // 存储userid
              localStorage.setItem('ps_userName', this.param.phone);
              localStorage.setItem('ps_userId', data.data.userId);

              // if (this.checked) {
              //     // localStorage.setItem('password', data.password);
              // }
              // 注册账号成功取创建个人信息
              this.$router.push({ path: '/register-info' });
            } else {
              this.changeImage();
              this.checkImage = false;
              this.clickTime = 0;
              this.countDown = '';
              this.param.smsCode = '';
              clearInterval(this.timerMin);
              clearTimeout(this.timer);
              this.$message.error(`${data.msg}`);
            }
          });
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    }
  }
};
</script>

<style lang="css" scoped>
.reg_header {
    width: 100%;
    height: 40px;
    background: rgba(24, 147, 252, 1);
    opacity: 1;
    margin-bottom: 40px;
}
.logo {
    cursor: pointer;
    text-align: center;
}
.main a {
    display: inline-block;
    height: 40px;
}
.main a img {
    margin-top: 5px;
}
.resume-create {
    width: 540px;
    margin: 0 auto;
}
.reg_box {
    width: 424px;
    background: rgba(255, 255, 255, 1);
    opacity: 1;
    margin: 100px auto 0;
    padding: 56px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
}
.reg_box h2 {
    height: 28px;
    font-size: 20px;
    font-family: PingFang SC;
    font-weight: 600;
    line-height: 28px;
    color: rgba(34, 34, 34, 1);
    opacity: 1;
    margin-bottom: 38px;
}
.reg_box h2 a {
    float: right;
    width: 40px;
    height: 28px;
    font-size: 20px;
    font-family: PingFang SC;
    font-weight: 600;
    line-height: 22px;
    color: rgba(24, 147, 252, 1);
    opacity: 1;
}
.reg_box .el-form-item {
    margin-bottom: 36px;
}
.el-form-item .el-input {
    line-height: 44px;
}
.el-form-item .captchaCode {
    width: 206px;
}
.el-form-item .captchaCode /deep/ .el-input__inner {
    width: 206px;
    text-transform: uppercase;
}
.el-form-item .el-form-item__content img {
    margin-left: 12px;
    vertical-align: top;
    width: 94px;
    height: 44px;
    background: rgba(239, 239, 239, 1);
    cursor: pointer;
    opacity: 1;
}
.el-form-item /deep/ .el-input__inner {
    width: 312px;
    height: 44px;
    background: rgba(248, 248, 248, 1);
    opacity: 1;
    border-radius: 4px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
}
.btn_inner /deep/ .el-input__inner {
    width: 100%;
}
.btn_inner /deep/ .el-button {
    width: 110px;
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: 400;
    line-height: 0;
    background: #F5F7FA;
    color: rgba(0, 147, 255, 1);
    opacity: 1;
    padding: 0;
    padding-left: 6px;
    cursor: pointer;
    border: none;
    /* border-left: 2px solid rgba(232, 232, 232, 1); */
}
.btn_inner /deep/ .el-button.disabled {
    color: #999999;
}

.agreement {
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: 400;
    line-height: 20px;
    opacity: 1;
}
.agreement span {
    color: rgba(153, 153, 153, 1);
}
.agreement a {
    color: rgba(0, 147, 255, 1);
}
.reg_box .el-form-item .submit_btn {
    width: 312px;
    height: 44px;
    background: rgba(24, 147, 252, 1);
    opacity: 1;
    border-radius: 4px;
    font-size: 16px;
    font-family: PingFang SC;
    font-weight: 400;
    color: rgba(255, 255, 255, 1);
    opacity: 1;
}
.el-dialog {
    padding: 0 30px;
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: 400;
    color: rgba(85, 85, 85, 1);
    opacity: 1;
}
.el-dialog div {
    margin-top: 20px;
}
.el-dialog p {
    margin-top: 10px;
}
.el-dialog li {
    margin-left: 30px;
}
.el-dialog ol {
    margin-top: 10px;
}
</style>